上一篇我們理解如何建立一個前端的專案，在繼續之前我也想分享一下如何開啟一個後端的專案，嚴格來說其實是一個全端的專案，這裡會使用到一樣是使用 JS 語言 Node.js 搭配 Express 框架來完成。

準備

需要下載 Node.js & npm

NPM 開始你的專案

What is NPM

NPM (Nodejs Program Management) 是 NodeJS 平台的套件管理工具

NPM Init

1. npm init
2. 輸入資訊
   1. Package-name - 專案名稱
   2. Version - 專案版本號 （1.0.0）
   3. Description - 專案的說明
   4. entry point - 起始程式的名稱（預設是 index.js）
   5. test command - 測試用的指令，可留白
   6. git repository - git 倉儲的位址，有 remote 會自動生成，沒有的話可留白但會有警告
   7. Keyword - 專案的關鍵字，可自訂亦可留白
   8. Author - 作者名稱，請寫下你自己的大名
   9. Licence - 授權，可註明授權種類，預設為（ ISC ）
3. 自動產生 package.json

Ex:

{
  "name": "foodstry-backend",
  "version": "1.0.0",
  "description": "The backend of foodstry which is the food management tool.",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ci-yang/foodstry-backend.git"
  },
  "author": "Ci Yang",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ci-yang/foodstry-backend/issues"
  },
  "homepage": "https://github.com/ci-yang/foodstry-backend#readme"
}

** script ** - 可攥寫各種指令，除了預設的 test & start 可直接使用 npm [command] 以外，其餘自訂的指令必須使用 run npm [command] e.g. run npm lint

NPM install

使用 install 安裝你的套件

指令

npm install [package name]

注意事項

• 會在 local 產生一個 ode_modules 資料夾，存放所有安裝的套件
• 後綴加上 -g 可以在全域的環境中安裝該套件
• 版本號有以下規則
  • “＾” - caret,
  • “～" - tiled
• 需要解安裝使用 uninstall

以下是有利於開發的套件

1. chalk

2. debug

   • install by npm install debug
   • DEBUG=* node app.js
   • DEBUG=app node app.js, app means the specific js name
   • use set DEBUG=app & node app.js if you're in windows environment

3. morgan

   • show the log to console

4. nodemon

   • the package allow you restart your program automatically

   • Install by npm install nodemon

   • use nodemon instead of node to start your program, e.g. nodemon app.js

   • make the configuration

     • "nodemonConfig": {
           "restartable": "rs",
           "ignore": [
             "node_modules/**/node_modules"
           ],
           "delay": "2500",
           "env": {
             "NODE_ENV": "development",
             "PORT": 4000
           }
       }
       

     • restartable: "rs" means if you hit "rs", restart the proram

     • Ignore: set the dir you want to ignore that when you change them, nodemon will do not restart

     • Delay: to delay 2500 milliseconds

     • env: Various of env settings whatever you want, e.g. databae location

   • Add start command "nodemon app.js"

5. eslint

   • eslint --init ( if local, use ./node_modules/.bin/eslint --init )
   • How would you like to configure ESLint? Use a popular style guide
   • Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
   • Do you use React? No
   • What format do you want your config file to be in? JavaScript

如此就建立一個全端的 Web 專案，包含了好用的檢查與 debug 工具，可以更佳輔助我們建立一個全端的應用～